
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="zoom.js"></script>
    <style>
        body{background: #f5f5f5}
        .ctlimage_bigimg{width:600px;position: fixed;left: 0;top: 0; right: 0;bottom: 0;margin:auto;display: none;z-index:9999;border: 10px solid #fff;}
        .ctlimage_mask{position: fixed;left: 0;top: 0; right: 0;bottom: 0;background-color: #000;opacity:0.5;filter: Alpha(opacity=50);z-index: 98;transition:all 1s;display: none}
        .ctlimage_bigbox{width:840px;background: #fff;border:1px solid #ededed;margin:0 auto;border-radius: 10px;overflow: hidden;padding:10px;}
        .ctlimage_bigbox>.ctlimage_imgbox{width:400px;float: left;border-radius: 5px;overflow: hidden;margin: 0 10px 10px 10px;}
        .ctlimage_bigbox>.ctlimage_imgbox>img{width:100%;}
        .ctlimage_imgbox:hover{cursor:zoom-in}
        .ctlimage_mask:hover{cursor:zoom-out}
        .ctlimage_bigimg:hover{cursor: move}
        .ctlimage_mask>img{position: fixed;right:10px;top: 10px;width: 60px;}
        .ctlimage_mask>img:hover{cursor:pointer}
    </style>
    <script>
        $(function(){
            /*
             ctlimage_smallimg   // 小图
             ctlimage_bigimg  //点击放大的图片
             ctlimage_mask   //黑色遮罩
             */
            var obj = new zoom('ctlimage_mask', 'ctlimage_bigimg','ctlimage_smallimg');
            obj.init();
        })
    </script>
</head>
<body>
<div class="ctlimage_bigbox">
    <div class="ctlimage_imgbox">
        <img src="img/a1.png" class="ctlimage_smallimg" alt="">
    </div>
    <div class="ctlimage_imgbox">
        <img src="img/a2.png" class="ctlimage_smallimg" alt="">
    </div>
    <div class="ctlimage_imgbox">
        <img src="img/a3.png" class="ctlimage_smallimg" alt="">
    </div>
    <div class="ctlimage_imgbox">
        <img src="img/a4.png" class="ctlimage_smallimg" alt="">
    </div>
    <div class="ctlimage_imgbox">
        <img src="img/a5.png" class="ctlimage_smallimg" alt="">
    </div>
    <div class="ctlimage_imgbox">
        <img src="img/a6.png" class="ctlimage_smallimg" alt="">
    </div>
</div>
<img src="" alt="" class="ctlimage_bigimg">
<div class="ctlimage_mask">
    <img src="img/close.png" alt="">
</div>
</body>
</html>